<template>
<!--  <h1>设备管理</h1>-->
  <br>

  <div align="left">
    <vxe-input v-model="用户账号" placeholder="搜索开户账号"  @keypress.native.enter="刷新数据(用户账号)"></vxe-input>
    <button type="button" class="layui-btn layui-btn-sm" @click="刷新数据(用户账号)">搜索</button>
  </div>

  <div align="left">
    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="刷新当前页" v-loading="加载中"><i class="layui-icon layui-icon-refresh"></i>刷新当前页</button>
    <button type="button" class="layui-btn layui-btn-sm" @click="新增用户">新增用户</button>
  </div>

  <vxe-pager background v-model:current-page="page.currentPage" v-model:page-size="page.pageSize"
             v-model:total="page.totalResult"
             :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
             @page-change='刷新数据(用户账号,"分页")'>
    <template #right>
      <img src="https://xuliangzhan_admin.gitee.io/vxe-table/static/other/img1.gif" height="34">
      <img src="https://xuliangzhan_admin.gitee.io/vxe-table/static/other/img1.gif" height="34">
      <img src="https://xuliangzhan_admin.gitee.io/vxe-table/static/other/img1.gif" height="34">
    </template>
  </vxe-pager>

  <div>
    <vxe-table size="medium" border resizable show-overflow   row-id="id"
               :edit-config="{trigger: 'click', mode: 'cell'}"
               ref="xTable"
               :data="tableData"
               @edit-closed="保存修改行" @edit-actived="记录编辑前" :loading="加载中" width="100%">
      <vxe-table-column type="seq"  title="序号" width="60" ></vxe-table-column>
      <vxe-table-column field="用户账号" title="用户账号" width="130"></vxe-table-column>
      <vxe-table-column field="创建时间" title="开户时间" width="200" sortable :formatter="formatTime"></vxe-table-column>
      <vxe-table-column field="status" title="用户状态" width="200" sortable>
        <template #default="{row}">
          <span v-if="row.status==1" style="color: green">使用中</span>
          <span v-if="row.status==2" style="color: red;">禁用中</span>
          <span v-if="row.status==3" style="color: red;">测试中测试中....</span>
          <span v-if="row.status==4" style="color: red;">测试过期,用心开导用户</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="points" v-model:points="points" title="余额点数" width="130px"  sortable>
        <template #default="{row}">
          <span v-if="row.points!=0" style="color: green">{{ row.points }}</span>
          <span v-if="row.points==0" style="color: red;">{{ row.points }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="总激活台数" v-model:points="points" title="总激活台数" width="130px"   sortable></vxe-table-column>
      <vxe-table-column field="今日使用台数" v-model:points="points" title="今日使用台数" width="130px"   sortable></vxe-table-column>
      <vxe-table-column field="最近一次启动脚本时间" title="最近一次脚本运行时间" width="200" sortable></vxe-table-column>
      <vxe-table-column field="备注" v-model="备注" title="备注" width="180"  :edit-render="{name: 'input', immediate: true}"></vxe-table-column>
      <vxe-table-column field="" title="操作"  sortable>
        <template #default="{row}">
          <button v-if="row.status==1||row.status==3 "  type="button" class="layui-btn layui-btn-sm layui-btn-warm" @click="改变状态(2,row)">点击禁用</button>
          <button v-if="row.status==2"  type="button"  class="layui-btn layui-btn-sm" @click="改变状态(1,row)">点击启用</button>
          <button v-if="row.status==3||row.status==4"  type="button"  class="layui-btn layui-btn-sm" @click="改变状态(1,row)">转正</button>
          <button   type="button"  class="layui-btn layui-btn-sm" @click="充值点数(row)">充值点数</button>
<!--          <button  type="button" class="layui-btn layui-btn-sm layui-btn-danger" @click="改变状态('del',row)">-->
<!--            <i class="layui-icon layui-icon-delete"></i>删除-->
<!--          </button>-->
        </template>
      </vxe-table-column>
    </vxe-table>

    <vxe-modal v-model="账号详情_显示中" width="1500" show-footer :title="'当前设备序列号:'+账号详情_显示中账号" :destroy-on-close='true'
               :marginSize="-500" :mask-closable="true">
      <xssbxzh v-model:设备序列号="账号详情_显示中账号"></xssbxzh>
    </vxe-modal>

    <vxe-modal v-model="新增后台用户_显示中" title="开户设置,默认初始密码:a123456789" :destroy-on-close='true' :maskClosable="true" type="alert">
      <xzhtyh></xzhtyh>
    </vxe-modal>

    <vxe-modal v-model="加点界面" title="充值点数" :destroy-on-close='true' :maskClosable="true" type="alert">
      <addpoint v-model:userId="userId"></addpoint>
    </vxe-modal>

  </div>
</template>

<script>
import xssbxzh from "../components/设备管理/显示设备下账号.vue";
import addpoint from "../components/后台用户/加点弹窗.vue";
import xzhtyh from "../components/后台用户/新增后台用户.vue";
import huifu from "../components/设备管理/恢复状态.vue";
import XEUtils from 'xe-utils'
import {mapGetters} from "vuex";

export default {
  components: {xssbxzh, xzhtyh, huifu,addpoint},
  data() {
    return {
      加点界面: false,
      新增后台用户_显示中: false,
      账号详情_显示中: false,
      账号详情_显示中账号: null,
      用户账号: "",
      编辑原始值: "",
      已勾选: [],
      points: "",
      userId: "",
      备注: "",
      page: {
        currentPage: 1,
        pageSize: 100,
        totalResult: 0,
      },
      tableData: [],
      加载中: true,
    };
  },
  created() {
    this.刷新数据();
  },
  methods: {
    刷新数据: function (设备名称,来自何方) {
      let T = this;
      if(来自何方=='分页'){
        T.已勾选=[];//翻页的时候清空勾选
      }
      this.tableData = [];
      T.加载中 = true;
      this.$请求(
          "/vip/admin/list",
          {
            第几页: T.page.currentPage,
            每页显示条数: T.page.pageSize,
            用户账号: T.用户账号,
          },
          function (response) {
            let obj=response.data.data;
            T.加载中 = false;
            T.tableData = obj.rows;
            T.page.totalResult = obj.count;
            //T.$XModal.message({content: "刷新成功", status: "success"});
          },
          function (err) {
          }
      );
    },
    formatTime ({ cellValue, row, column }) {
      return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
    },
    editClosedEvent({row, column}) {
      console.log(`${column.property} : ${row[column.property]}`);
    },
    getSelectionEvent: function () {
      const $table = this.$refs.xTable.getCheckboxRecords();
      return $table;
    },
    新增用户:async function(){
      this.新增后台用户_显示中=true;
    },
    刷新当前页:async function(){
      this.刷新数据();
    },

    记录编辑前({row,column}){
      this.编辑原始值 = row[column.property]
    },
    保存修改行({row,column}) {
      let T = this;
      if (column) {
        if (row[column.property] == this.编辑原始值) {
          return
        }
      }
      this.加载中 = true;
      const data={
        userId:row.用户id,
        points:row.points,
        mark:row.备注,
      }
      this.$请求("/vip/update/user/info", data, function (obj) {
        T.加载中 = false;
        if(obj.data.code!==1){
          T.$XModal.message({content: obj.data.message, status: "error"});
          T.刷新数据();
        }
      });
    },

    改变状态:async function(status,info){
      const T=this;
      this.$请求('/vip/update/info',{status,userId:info.用户id},function(obj){
        if(obj.data.code!=1){
          T.$XModal.message(obj.data.message,{status:'error'});
        }
        T.刷新数据();
      })
    },

    充值点数:async function(row){
      this.userId=row.用户id
      this.加点界面=true
    }

  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(["userInfo"]),
  },
};
</script>


<style>
button {
  margin: 1px !important;
  border: 0px !important;
  /* padding: px !important; */

}
.befor{
  color: #67c23a;
}
.after{
  color: red;
}
</style>
